<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="header">
			<view class="location">
				<uni-icons type="location-filled" size="20" color="#4CAF50"></uni-icons>
				<text class="location-text">大连市甘井子区</text>
			</view>
			<uni-icons type="search" size="20" color="#666"></uni-icons>
		</view>

		<!-- 轮播图 -->
		<swiper class="banner" autoplay interval="3000" circular>
			<swiper-item v-for="banner in banners" :key="banner.id">
				<image :src="banner.imageUrl" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
		</swiper>

		<!-- 农田概览 -->
		<view class="overview-card">
			<view class="overview-item">
				<text class="overview-value">{{ farmOverview.totalFarms || 0 }}</text>
				<text class="overview-label">农田总数</text>
			</view>
			<view class="overview-item">
				<text class="overview-value">{{ farmOverview.totalArea || 0 }}</text>
				<text class="overview-label">总面积(亩)</text>
			</view>
			<view class="overview-item">
				<text class="overview-value">{{ farmOverview.pendingIssues || 0 }}</text>
				<text class="overview-label">待处理</text>
			</view>
		</view>

		<!-- 状态提示 -->
		<view class="status-bar">
			<view class="status-item" v-for="status in farmStatus" :key="status.status">
				<view class="status-dot" :style="{ backgroundColor: status.color }"></view>
				<text>{{ status.status }} {{ status.count }}块</text>
			</view>
		</view>

		<!-- 快捷功能 -->
		<view class="quick-actions">
			<view class="action-item" @click="handleAddField">
				<view class="action-icon" style="background-color: #4CAF50;">
					<uni-icons type="plus" size="24" color="#fff"></uni-icons>
				</view>
				<text>添加新田</text>
			</view>
			<view class="action-item" @click="handleTodayTask">
				<view class="action-icon" style="background-color: #2196F3;">
					<uni-icons type="calendar" size="24" color="#fff"></uni-icons>
					<view class="badge">{{ todayTasks.filter(task => !task.completed).length }}</view>
				</view>
				<text>今日农事</text>
			</view>
			<view class="action-item" @click="handleWeather">
				<view class="action-icon" style="background-color: #00BCD4;">
					<uni-icons type="list" size="24" color="#fff"></uni-icons>
				</view>
				<text>气象站</text>
			</view>
			<view class="action-item" @click="handleRecord">
				<view class="action-icon" style="background-color: #9C27B0;">
					<uni-icons type="compose" size="24" color="#fff"></uni-icons>
				</view>
				<text>农事记录</text>
			</view>
		</view>

		<!-- 今日农事 -->
		<view class="today-tasks">
			<view class="section-header">
				<text class="section-title">今日农事</text>
				<text class="section-more" @click="handleTodayTask">查看全部</text>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(task, index) in todayTasks" :key="task.id"
					@click="toggleTaskStatus(task.id, index)">
					<view class="task-checkbox" :class="{ completed: task.completed }">
						<uni-icons v-if="task.completed" type="checkmarkempty" size="20" color="#fff"></uni-icons>
					</view>
					<view class="task-content">
						<text class="task-name" :class="{ completed: task.completed }">{{ task.name }}</text>
						<text class="task-field">农田: {{ task.field }}</text>
						<text class="task-time">{{ task.time }}</text>
					</view>
					<view class="task-priority" :style="{ backgroundColor: getPriorityColor(task.priority) }">
						{{ getPriorityText(task.priority) }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 响应式数据
	const userLocation = ref('');
	const banners = ref([]);
	const farmOverview = ref({});
	const farmStatus = ref([]);
	const todayTasks = ref([]);
	const loading = ref(true);

	// 获取用户信息
	const fetchUserInfo = () => {
		uni.request({
			url: 'http://localhost:3000/users',
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					userLocation.value = res.data.location;
				}
			},
			fail: (err) => {
				console.error('获取用户信息失败:', err);
			}
		});
	};

	// 获取轮播图数据
	const fetchBanners = () => {
		uni.request({
			url: 'http://localhost:3000/banners',
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					banners.value = res.data;
				}
			},
			fail: (err) => {
				console.error('获取轮播图数据失败:', err);
			}
		});
	};

	// 获取农田概览数据
	const fetchFarmOverview = () => {
		uni.request({
			url: 'http://localhost:3000/farmOverview',
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					farmOverview.value = res.data;
				}
			},
			fail: (err) => {
				console.error('获取农田概览数据失败:', err);
			}
		});
	};

	// 获取农田状态数据
	const fetchFarmStatus = () => {
		uni.request({
			url: 'http://localhost:3000/farmStatus',
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					farmStatus.value = res.data;
				}
			},
			fail: (err) => {
				console.error('获取农田状态数据失败:', err);
			}
		});
	};

	// 获取今日任务数据
	const fetchTodayTasks = () => {
		uni.request({
			url: 'http://localhost:3000/todayTasks',
			method: 'GET',
			success: (res) => {
				if (res.statusCode === 200) {
					todayTasks.value = res.data;
				}
				loading.value = false;
			},
			fail: (err) => {
				console.error('获取今日任务数据失败:', err);
				loading.value = false;
			}
		});
	};

	// 切换任务状态
	const toggleTaskStatus = (taskId, index) => {
		const newStatus = !todayTasks.value[index].completed;

		uni.request({
			url: `http://localhost:3000/todayTasks/${taskId}`,
			method: 'PATCH',
			data: {
				completed: newStatus
			},
			success: (res) => {
				if (res.statusCode === 200) {
					todayTasks.value[index].completed = newStatus;
				}
			},
			fail: (err) => {
				console.error('更新任务状态失败:', err);
				uni.showToast({
					title: '更新任务状态失败',
					icon: 'none'
				});
			}
		});
	};

	// 初始化数据
	const initData = () => {
		loading.value = true;
		fetchUserInfo();
		fetchBanners();
		fetchFarmOverview();
		fetchFarmStatus();
		fetchTodayTasks();
	};

	// 生命周期钩子
	onMounted(() => {
		initData();
	});

	// 优先级相关函数
	const getPriorityColor = (priority) => {
		switch (priority) {
			case 1:
				return '#F44336';
			case 2:
				return '#FF9800';
			case 3:
				return '#4CAF50';
			default:
				return '#9E9E9E';
		}
	};

	const getPriorityText = (priority) => {
		switch (priority) {
			case 1:
				return '重要';
			case 2:
				return '中等';
			case 3:
				return '一般';
			default:
				return '普通';
		}
	};

	// 其他方法
	const handleAddField = () => {
		console.log('添加新田');
	};

	const handleTodayTask = () => {
		console.log('今日农事');
	};

	const handleWeather = () => {
		console.log('气象站');
	};

	const handleRecord = () => {
		console.log('农事记录');
	};
</script>

<style>
	/* 基础设置 */
	page {
		background: #f8f8f8;
		color: #333;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 容器布局 */
	.container {
		/* padding-bottom: 100rpx; */
		display: flex;
		flex-direction: column;
		min-height: 90vh;
	}

	/* 顶部搜索栏 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: white;
	}

	.location {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	/* 轮播图 - 精简版 */
	.banner {
		height: 350rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	/* 卡片式布局 */
	.overview-card,
	.status-bar,
	.activity-section {
		background: white;
		border-radius: 12rpx;
		margin: 20rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
	}

	/* 农田概览 */
	.overview-card {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.overview-value {
		font-size: 20px;
		font-weight: bold;
		color: #4CAF50;
	}

	.overview-label {
		font-size: 12px;
		color: #999;
		margin-top: 8rpx;
	}

	/* 状态提示 */
	.status-bar {
		display: flex;
		justify-content: space-around;
	}

	.status-item {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.status-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		margin-right: 8rpx;
	}

	/* 快捷功能 */
	.quick-actions {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin: 20rpx;
	}

	.action-item {
		background: white;
		border-radius: 12rpx;
		padding: 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
	}

	.action-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
		position: relative;
	}

	.badge {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background: #F44336;
		color: white;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
		font-size: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 最近动态 */
	.section-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-weight: bold;
	}

	.section-more {
		color: #999;
		font-size: 12px;
	}

	.activity-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.activity-item:last-child {
		border-bottom: none;
	}

	.activity-content {
		flex: 1;
		margin: 0 20rpx;
	}

	.activity-time {
		color: #999;
		font-size: 12px;
	}

	/* 今日农事 */
	.today-tasks {
		background: white;
		border-radius: 12rpx;
		margin: 20rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
	}

	.section-more {
		font-size: 12px;
		color: #4CAF50;
	}

	.task-list {
		margin-top: 15rpx;
	}

	.task-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.task-checkbox {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.task-checkbox.completed {
		background-color: #4CAF50;
		border-color: #4CAF50;
	}

	.task-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.task-name {
		font-size: 16px;
		margin-bottom: 5rpx;
	}

	.task-name.completed {
		text-decoration: line-through;
		color: #999;
	}

	.task-field,
	.task-time {
		font-size: 12px;
		color: #999;
	}

	.task-priority {
		padding: 5rpx 15rpx;
		border-radius: 20rpx;
		font-size: 12px;
		color: white;
	}
</style>